﻿import Taro, { Component } from '@tarojs/taro'
import { Swiper, SwiperItem, Image, View, Text } from '@tarojs/components'
import CommonJs from '../../utils/common'
import './recharge.scss'

export default class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tuitable:[ 
                {number:'1',tuibg:false,innerhtml:false,click:'1'},
                {number:'2',tuibg:false,innerhtml:false,click:'1'},
                {number:'3',tuibg:false,innerhtml:false,click:'1'},
                {number:'4',tuibg:false,innerhtml:false,click:'1'},
                {number:'5',tuibg:false,innerhtml:false,click:'1'},
                {number:'6',tuibg:false,innerhtml:false,click:'1'},
                {number:'7',tuibg:false,innerhtml:false,click:'1'},
                {number:'8',tuibg:false,innerhtml:false,click:'1'},
                {number:'9',tuibg:false,innerhtml:false,click:'1'},
                {number:'-',tuibg:true,innerhtml:false,click:'3'},
                {number:'0',tuibg:false,innerhtml:false,click:'1'},
                {number:'',tuibg:true,innerhtml:true,click:'2'}
              ],
      bmtetlist:[
                 {touimg:'https://minichat.g2ma.com/kedouimg/weixin.png',toutype:'微信',toucheck:true,id:'2'},
                 
                ],//{touimg:'https://minichat.g2ma.com/kedouimg/zhifb.png',toutype:'支付宝',toucheck:true,id:'1'},
                //{touimg:'https://minichat.g2ma.com/kedouimg/icon28.png',toutype:'余额',toucheck:false,id:'3'},
      paytypes:2,//支付方试
      consumptionRatio:'',
      integralProportion:'',
      livebili:0,
      obtainBeen:'',
      recharge:'',
      zftype:0,
      paypwd:[],
      paypwdlen:0
    }
  }
  config = {
    navigationBarTitleText: '充值'
  }
  componentWillMount () {
    this.getIntegral()
  }
  open(url,type){
    CommonJs.openTo(url)
  }
  payment(event){
    var _this = this
    // console.log(JSON.stringify(event))
    var checked = event.currentTarget.dataset.type
    var bmtetlist = _this.state.bmtetlist//获取Json数组
    for (var i = 0; i < bmtetlist.length;i++){
      if (bmtetlist[i].id == checked){
        bmtetlist[i].toucheck = true;//当前点击的位置为true即选中
      }
      else{
        bmtetlist[i].toucheck = false;//其他的位置为false
      }
    }
    _this.setState({
      bmtetlist:bmtetlist,
      paytypes:checked
    })
  }
  getIntegral(){
    //获取比例
    var _this = this
    var dates = {}
    // console.log(JSON.stringify(dates)+'111111111')
    CommonJs.ajaxRequest('/consume/consumptionRatio',dates,'GET',function(res){
      // console.log(JSON.stringify(res)+'111111111')
      var livebili = res.content.consumptionRatio * 0.01
      _this.setState({
        consumptionRatio:res.content.consumptionRatio,
        integralProportion:res.content.integralProportion,
        livebili:livebili
      })
    })
  }
  getmoney(event){
    var _this = this
    var recharge = event.target.value
    var livebili = _this.state.livebili
    if (recharge == '') {
      var obtainBeen = ''
    } else {
      var obtainBeens = parseFloat(recharge) / livebili
      var obtainBeen = obtainBeens.toFixed(2)
    }
    _this.setState({
      obtainBeen:obtainBeen,
      recharge:recharge
    })
  }
  recharges(){
    var _this = this
    var recharge = String(_this.state.recharge)
    if (recharge == '') {
      Taro.showToast({
        title:'请输入充值金额',
        icon: 'none',
        duration: 2000
      })
    } else if (recharge.substring(0,1) == '0') {
      Taro.showToast({
        title:'请输入正确的金额',
        icon: 'none',
        duration: 2000
      })
    } else {
      var paytypes = _this.state.paytypes
      if (paytypes == 2) {
        Taro.login({
          success(res) {
            // console.log(JSON.stringify(res)+'aa1111')
            if (res.code) {
              _this.applys(res.code)
            } else {
              Taro.showToast({
                title:'网络异常',
                icon: 'none',
                duration: 2000
              })
            }
          }
        })
      } else if (paytypes == 3) {
        _this.setState({
          zftype:1,
          paypwd:[],
          paypwdlen:0
        })
      }
    }
  }
  applys(code){
    var _this = this
    var paytypes = _this.state.paytypes
    var amount = _this.state.recharge
    if (paytypes == 2) {
      var dates = {
        amount:amount*100,
        payTypeId:'125',
        tradeTypeId:'1007',
        code:code
      }
    } 
    
    Taro.showLoading({title: '支付中',mask: true})
    CommonJs.ajaxRequest('/crm/papi/v1.9/currency',dates,'POST',function(ret){
    
      if (paytypes == 2) {
        var res=ret.data;
        Taro.requestPayment({
          timeStamp: res.timeStamp,
          nonceStr: res.nonceStr,
          package: res.packageValue,
          signType: res.signType,
          paySign: res.paySign,
          success(red) {
            //_this.certificate()
            Taro.showToast({
              title:'充值成功',
              icon: 'none',
              duration: 2000
            })
            setTimeout(function(){
				    	CommonJs.openTo('/pages/my/dollardetails')
				    },1000)
          },
          fail() {
            Taro.showToast({
              title:'支付失败',
              icon: 'none',
              duration: 2000
            })
          }
        })
      } 
        
    },'wfw')
  }
  certificate(){
    var _this = this
    var regType = _this.$router.preload.regType
    if (regType == 2) {
      var pages = Taro.getCurrentPages()
      var lastPage = pages[pages.length - 3]
      // console.log(lastPage.data)
      lastPage.setData({
        coxcommit:true
      })
      Taro.navigateBack({
        delta: 2
      })
    } else if (regType == 1) {
      var pages = Taro.getCurrentPages()
      var lastPage = pages[pages.length - 2]
      // console.log(lastPage.data)
      lastPage.setData({
        regTypes:true
      })
      Taro.navigateBack({
        delta: 1
      })
    }
  }
  buzhichi(){
    Taro.showModal({
      title: '提示',
      content: '抱歉，小程序不允许你访问网页链接，如需获得最全功能和更好体验请下载“蝌蚪社区”APP!',
      showCancel: false
    })
  }
  inputNum(type,event){
    var _this = this
    // console.log(JSON.stringify(event))
    // console.log(type)
    var paypwd = _this.state.paypwd
    if (type == 1) {
      var paypwdlen = paypwd.length
      if (paypwdlen < 6) {
        var num = event.target.dataset.number
        paypwd.push(num)
        var paypwdlen = paypwd.length
        _this.setState({
          paypwd:paypwd,
          paypwdlen:paypwdlen
        },function(){
          if (paypwdlen == 6) {
            //支付
            _this.applys('')
          }
        }) 
      }
    } else if (type == 2) {
      paypwd.pop()
      var paypwdlen = paypwd.length
      _this.setState({
        paypwd:paypwd,
        paypwdlen:paypwdlen
      })
    }
    // console.log(JSON.stringify(_this.state.paypwd))
  }
  closepay(){
    var _this = this
    _this.setState({
      zftype:0
    })
  }
  render () {
    const tuitable = this.state.tuitable
    const bmtetlist = this.state.bmtetlist
    const paypwdlen = this.state.paypwdlen
    return (
      <View className='page'>
        <View className='qun-zffixed' style={this.state.zftype==1?'display:block':'display:none'}>
          <View className='qun-zfbotn'>
            <View className='section'>
              <View className='qun-zftite'>
                <Image className='qun-zfclose' onClick={this.closepay.bind(this)} src='https://minichat.g2ma.com/kedouimg/close1.png'></Image>
                <Text>请输入支付密码</Text>
                <Text></Text>
              </View>
              <View className='qun-zfmima'>
                <View className='qun-zfkuan'>
                  <Input className='qun-zfmmyn' value={paypwdlen >= 1 ? '●' : ''} type='text' disabled='true'/>
                  <Input className='qun-zfmmyn' value={paypwdlen >= 2 ? '●' : ''} type='text' disabled='true'/>
                  <Input className='qun-zfmmyn' value={paypwdlen >= 3 ? '●' : ''} type='text' disabled='true'/>
                  <Input className='qun-zfmmyn' value={paypwdlen >= 4 ? '●' : ''} type='text' disabled='true'/>
                  <Input className='qun-zfmmyn' value={paypwdlen >= 5 ? '●' : ''} type='text' disabled='true'/>
                  <Input className='qun-zfmmyn' value={paypwdlen >= 6 ? '●' : ''} type='text' disabled='true'/>
                </View>
              </View>
              <View className='qun-zfwanji'><Text onClick={this.open.bind(this,'./pwdset')}>忘记密码?</Text></View>
              <View className='tui-table-view'>
                {tuitable.map((item, index) => (
                <View className={item.tuibg ? 'tui-col-3 tui-bg' : 'tui-col-3'} dataNumber={item.number} onClick={this.inputNum.bind(this,item.click)}>
                  {item.innerhtml ?
                    <Image className='qun-zfdel' src='https://minichat.g2ma.com/kedouimg/del.png'></Image>
                    :
                    item.number
                  }
                </View>
                ))}
              </View>
            </View>
          </View>
        </View>
        <View className='recharge-num'>
          <View className='recharge-gueli'>
            <View className='recharge-bmzlo'>
              <Text className='recharge-bmsuwn'>充值金额</Text>
            </View>
            <View className='recharge-bmsuj'>
              <View className='recharge-jagn'>
                <Input className='' type='number' onInput={this.getmoney.bind(this)} placeholder='请输入充值金额'/>
              </View>
            </View>
          </View>
          <View className='recharge-gueli'>
            <View className='recharge-bmzlo'>
              <Text className='recharge-bmsuwn'>获得UC</Text>
            </View>
            <View className='recharge-bmsuj'>
              <View className='recharge-jagn'>
                <Input className='' type='number' disabled='true' value={this.state.obtainBeen} />
              </View>
            </View>
          </View>
          <View className='recharge-gueli'>
            <View className='recharge-bmzlo'>
              <Text className='recharge-bmsuwn'>UC获得比例</Text>
            </View>
            <View className='recharge-bmsuj'>
              <View className='recharge-jagn'>
                <Input className='' type='number' disabled='true' value={this.state.consumptionRatio+'%'} />
              </View>
            </View>
          </View>
          <View className='recharge-gueli' style="display:none">
            <View className='recharge-bmzlo'>
              <Text className='recharge-bmsuwn'>积分获得比例</Text>
            </View>
            <View className='recharge-bmsuj'>
              <View className='recharge-jagn'>
                <Text className=''>{this.state.integralProportion+'%'}</Text>
              </View>
            </View>
          </View>
        </View>
        <View className='recharge-num recharge-way'>
          <View className='recharge-bmtet'>充值方式</View>
          {bmtetlist.map((item, index) => (
          <View className='recharge-zifans' onClick={this.payment.bind(this)} dataType={item.id}>
            <View className='recharge-zifuli'>
              <View className='recharge-fasi'>
                <Image className='recharge-fsimg' src={item.touimg}></Image>
                <View className='recharge-wexm'>
                  <Text>{item.toutype}</Text>
                  <Text className='recharge-wexsy'>{item.touname}</Text>
                </View>
              </View>
              <Image className='recharge-bmbgtu' src={item.toucheck ? 'https://minichat.g2ma.com/kedouimg/check.png' : 'https://minichat.g2ma.com/kedouimg/notch.png'}></Image>
            </View>
          </View>
          ))}
        </View>
        <View className='recharge-buy' onClick={this.recharges.bind(this)}>充值</View>
      </View>
    )
  }
}